// sass --style compact play-weixin-web.scss play-weixin-web.css
// sass --style compressed play-weixin-web.scss play-weixin-web.css
// sass --watch play-weixin-web.scss:play-weixin-web.css

$font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
$font-size: 14px;
$font-size-lt: 12px;
$font-size-lg: 18px;
$font-size-hg: 36px;
$padding: 20px;
$color-black: #222222;
$color-white: #ffffff;
$color-gray: #cccccc;
$color-blue: #4678ab;

/* element style */
body {
	width: 100%;
	height: 200%;
	margin-top: 51px;
	background-color: $color-white;
	font-family: $font-family;
	font-size: $font-size;
	color: $color-black;
	&.body-article {
		margin-top: 0;
	}
}

/* bootstrap override */
.row {
	margin-right: -$padding/4;
	margin-left: -$padding/4;
	[class^=col-] {
		padding-right: $padding/4;
		padding-left: $padding/4;
	}
}
.navbar-eqx {
	background-color: $color-blue;
	border-color: darken($color-blue, 10%);
	.navbar-brand {
		color: $color-white;
		&:hover,
		&:focus {
			color: $color-white;
		}
	}
}
.nav-eqx {
	&.nav-justified {
		> li {
			display: table-cell;
    		width: 1%;
    		> a {
    			margin-bottom: 0;
    			border-radius: 0;
    			background-color: darken($color-white, 5%);
    			color: $color-black;
    		}
    		&.active {
    			position: relative;
    			bottom: -1px;
    			border-bottom: 1px solid $color-blue;
    			z-index: 999;
    			> a {
    				background-color: $color-white;
    				color: $color-black;
    			}
    		}
		}
		> li + li {
			border-left: 1px solid $color-gray;
		}
	}
}

/* application style */
.loan-list {
	border-bottom: 1px solid $color-gray;
	.item,
	.more {
		padding: $padding/2;
		border-top: 1px solid $color-gray;
	}
	.item {
		h1 {
			margin: 0;
			margin-bottom: $padding/2;
			padding: 0;
			font-size: $font-size-lg;
		}
		.row {
			margin-top: $padding/4;
			color: lighten($color-black, 20%);
		}
		.progress {
			margin-bottom: 0;
		}
		&:hover {
			background-color: darken($color-white, 5%);
		}
	}
	.more {
		text-align: right;
	}
}
.article {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: $padding/4 $padding/2;
	h1 {
		margin-bottom: $padding/2;
		font-size: $font-size-hg;
	}
	.date {
		margin-bottom: $padding;
		font-size: $font-size-lg;
		color: $color-gray;
	}
	.text {
		line-height: 150%;
		font-size: $font-size-lg;
	}
}
